<div id="site-search" class="site-search">
  <span id="search-icon" class="octicon-search mobile-visible" onclick="mobileSearch(this);"></span>
  <input id="search_box" class="mobile-search-hidden" type="text" placeholder="Search" >
  <ul id="search_results"></ul>
</div>

<script src="{{ assets_base_url }}/assets/js/simple-jekyll-search.min.js"></script>

<script type="text/javascript">
  function mobileSearch(node) {
    var search = $('#search_box');
    if (search.hasClass('mobile-search-hidden')) {
      search.removeClass('mobile-search-hidden');
    } else {
      search.addClass('mobile-search-hidden');
    }
    if (node.style.right == '5px') {
      node.style.right = '0px';
    } else {
      node.style.right = '5px';
    }
  };
  SimpleJekyllSearch({
    searchInput: document.getElementById('search_box'),
    resultsContainer: document.getElementById('search_results'),
    json: '{{ site.url }}/assets/search_data.json?v={{ "now" | date: "%s"}}',
    searchResultTemplate: '<li><a href="{url}" title="{title}">{title}</a></li>',
    noResultsText: '<li class="empty">No results found</li>',
    limit: '{{ site.simple_jekyll_search.limit }}',
    fuzzy: false,
    exclude: ['Welcome']
  });
</script>
